<script>
import siteOptions from './siteOptions';
export default {
  name: 'DragPreview',
  mixins: [siteOptions],
  props: {
    params: Object
  },
  render() {
    let { params, config, options, slot, componentName, commonOptions } = this;
    commonOptions = JSON.parse(JSON.stringify(commonOptions));
    const newcommonOptions = {
      ...commonOptions,
      width: ((commonOptions.width / 1440) * 100).toFixed(2) + '%',
      height: ((commonOptions.height / 800) * 100).toFixed(2) + '%',
      top: ((commonOptions.top / 800) * 100).toFixed(2) + '%',
      left: ((commonOptions.left / 1440) * 100).toFixed(2) + '%'
    };
    const Tag = config.tag;
    let slotConent = '';
    let slotTag = (slot && slot.tag) || '';
    switch (componentName) {
      case 'inputTextarea':
        options.autosize = options.autosizeAuto || options.autosize;
        break;
      case 'inputComponent':
        slotConent = (
          <span>
            <template slot="prepend">{slot.prepend}</template>
            <template slot="append">{slot.append}</template>
          </span>
        ).children;
        break;
    }
    if (componentName !== 'cardComponent') {
      slotConent = slotTag
        ? slot.options.map((item) => {
            return (
              <slotTag {...{ attrs: item }}>
                {slotTag === 'el-option' ? item.label : item.value}
              </slotTag>
            );
          })
        : slotConent;
    }
    if (Tag === 'echarts-component') {
      options.componentName = componentName;
      options.echartsOptions = this.echartsOptions;
    }
    let obj = {};
    for (const item of this.getStyle(options.style)) {
      Object.assign(obj, item);
    }
    const style = {
      ...obj,
      ...this.getFreeStyle(newcommonOptions, 'preview')
    };
    const TagItem = (
      <Tag {...{ attrs: { ...options, style: '' } }} v-model={this.vModel}>
        {componentName === 'buttonComponent' ? options.text : ''}
        {slotConent}
      </Tag>
    );
    return (
      <div
        style={{
          ...style,
          position: 'absolute'
        }}
      >
        {TagItem}
      </div>
    );
  }
};
</script>

<style scoped>
</style>